<!-- 图库 -->
<template>
  <div class="photo-item">
    <div class="photo-item-img">
      <van-image @click="viewItem" fit="cover" :src="props.itemData.cover" />
      <div class="view-box">
        <!-- <img src="../../assets/image/img09.png" /><span>5.6W</span> -->
        <van-icon name="photo-o" color="#fff" size="18" /><span>{{
          props.itemData.imageNum
        }}</span>
      </div>
      <div class="vip-box" v-if="props.itemData.permission == 1">
        <img src="../../assets/image/vip.png" alt="" />
      </div>
    </div>
    <div class="photo-item-content">
      <div class="photo-item-content-left">
        <van-image
          fit="cover"
          :src="props.itemData.anchor.avatar"
          @click="avaterClick"
        />
        <span>{{ props.itemData.anchorName }}</span>
      </div>
      <div
        class="photo-item-content-right"
        v-if="props.isHeadle"
        @click="headleCollect"
      >
        <van-icon
          name="like-o"
          size="18"
          color="#ee66ff"
          v-if="!props.itemData.isCollect"
        />
        <van-icon name="like" size="18" color="#ee66ff" v-else />
      </div>
    </div>
  </div>
  <van-image-preview
    v-model:show="showValue"
    :images="images"
    :close-on-click-image="false"
    :startPosition="ImageIndex"
    teleport="body"
    closeable
  >
    <template #image="{ src, style, onLoad }">
      <van-image
        v-if="!(src.indexOf('.mp4') > 0)"
        :style="[{ width: '100%' }, style]"
        fit="cover"
        position="center"
        :src="src"
        @load="onLoad"
      ></van-image>
      <div class="play-video-main-box" v-else controls>
        <!-- <vue3VideoPlay
          width="100%"
          title="钢铁侠"
          :src="src"
          playsinline
        /> -->
        <video controls>
          <source :src="src + '#t=0.1'" type="video/mp4" />
        </video>
      </div>
    </template>
    <!-- <template v-slot:cover>
      <div class="foot footer-box" v-if="props.itemData.isVipCurrentUser">
        <div class="foot-btn">
          <p>非会员只能查看3张图片</p>
          <van-button type="primary" @click="openMember()" size="mini" round
            >开通会员</van-button
          >
        </div>
      </div>
    </template> -->
  </van-image-preview>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showImagePreview } from "vant";
import icon_hand3 from "@/assets/image/icon_hand3.png";

import { UpdateCollection } from "@/api/common";
import { showToast } from "vant";

const props = defineProps({
  itemData: {
    type: Object,
    default: () => {},
  },
  isHeadle: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["clickCollect"]);

const route = useRoute();

const state = reactive({
  icon_hand3,
});

const { goodsList, tabsList } = toRefs(state);

const router = useRouter();

const GoToGoodsOrder = (index) => {
  let item = state.goodsList[index];
  router.push({
    path: "/goodsDetail",
    query: {
      goodId: item.anchorId,
    },
  });
};

// 收藏
const headleCollect = async () => {
  let { id, isCollect } = props.itemData;
  let params = {
    id,
    isCollect: !isCollect,
  };
  let data = await UpdateCollection(params);
  let msg = !isCollect ? "收藏成功" : "取消收藏";
  showToast(msg);
  emits("clickCollect", props.itemData);
};

const avaterClick = () => {
  router.push({
    name: "activityDetail",
    query: {
      anchorId: props.itemData.anchor.id,
    },
  });
};

// 预览
import { showConfirmDialog } from "vant";
let showValue = ref(false);
let images = ref([]);
let ImageIndex = ref(0);
const viewItem = () => {
  if (!props.itemData.isLogin) {
    showConfirmDialog({
      title: "提示",
      message: "老铁，登录后才能查看我哟！",
      confirmButtonText:"前往登录"
    })
      .then(() => {
        router.push({
          name: "login",
        });
      })
      .catch(() => {  
        // on cancel
      });
    return;
  }
  if (!props.itemData.isVip) {
    showConfirmDialog({
      title: "提示",
      message: "老铁，开通会员后才能查看我哟！",
      confirmButtonText:"立即升级"
    })
      .then(() => {
        openMember();
      })
      .catch(() => {
        // on cancel
      });
    return;
  }
  images.value = props.itemData.image;
  showValue.value = true;
  // ImageIndex.value = index ? index : 0;
};

const openMember = () => {
  router.push({
    name: "memberCenter",
  });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.photo-item {
  margin: 10px 0 0 10px;
  background: #fff;
  border-radius: 18px;

  .van-image {
    width: 100%;
    height: 180px;
  }
}

.photo-item-img {
  position: relative;
  .van-image {
    width: 100%;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    display: block;
  }
  .view-box {
    position: absolute;
    top: 10px;
    left: 50%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 0 8px;
    border-radius: 20px;
    transform: translateX(-50%);
    font-size: 14px;
    span {
      display: block;
      line-height: 23px;
      color: #fff;
      margin-left: 2px;
      line-height: 1;
    }
    img {
      width: 14px;
      margin-right: 5px;
    }
  }
}

.photo-item-content {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.photo-item-content-left {
  display: flex;
  align-items: center;
  span {
    color: #999;
    font-size: 14px;
  }
  .van-image {
    width: 28px;
    height: 28px;
    border-radius: 36px;
    overflow: hidden;
    flex: none;
    margin-right: 5px;
  }
}
.photo-item-content-right {
  height: 20px;
}
.play-video-main-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  video {
    width: 100vw;
    height: 60vh;
  }
}
.foot {
  width: 100vw;
  position: fixed;
  bottom: 0;
  p {
    color: #fff;
    font-size: 14px;
    margin-right: 5px;
  }
  .foot-btn {
    margin: 0 20px;
    padding-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-button {
      color: #fff;
      background: $default-color;
      border: none;
      padding: 0 10px;
    }
  }
}
.vip-box {
  position: absolute;
  top: 10px;
  left: 10px;
  img {
    width: 20px;
  }
}
</style>
